<template>
	<view class="home-chat-body">
		<u-list :scrollIntoView="scrollIntoView" @scroll="scroll" height="100%">
			<z-window-chat-body-msg v-for="(message, index) in (context)" :message="message" :isContext="true"/>
			<z-window-chat-body-msg v-for="(message, index) in (messages)" :key="index" :message="message"
			                        @deleteMessage="deleteMessage(index)"/>
			<view id="last-msg-item" class="home-chat-body-tail"></view>
		</u-list>
	</view>
</template>

<script>
export default {
	props: {
		chatBodyList: {
			type: Array
		},
		curSelectIndex: {
			type: Number
		},
	},
	data() {
		return {
			chatHeight: 100,
			scrollAtAheBottom: true,
			scrollIntoView: "last-msg-item",
			context: {},
			messages: {},
		}
	},
	created() {
		const chatBody = this.chatBodyList[this.curSelectIndex];
		this.context = chatBody && chatBody.context ? chatBody.context : {};
		this.messages = chatBody && chatBody.messages ? chatBody.messages : {};
	},
	methods: {
		scroll(height) {
			if (height > this.chatHeight) {
				this.chatHeight = height;
			}
			this.scrollAtAheBottom = this.chatHeight === 100 || height > this.chatHeight - 50;
		},
		scrollToBottom(type) {
			if (type === 1 || (type === 2 && this.scrollAtAheBottom)) {
				// 等待DOM更新
				this.$nextTick(() => {
					// 将scrollIntoView属性设置为"last-msg-item"，以便滚动窗口到最后一条消息
					this.scrollIntoView = "last-msg-item"
					// 等待DOM更新，即：滚动完成
					this.$nextTick(() => {
						// 将scrollIntoView属性设置为空，以便下次设置滚动条位置可被监听
						this.scrollIntoView = ""
					})
				})
			}
		},
		deleteMessage(index) {
			if (this.messages.length <= index) {
				return;
			}
			if (this.messages[index].role === "assistant") {
				this.messages.splice(index, 1);
				if (index > 0) {
					this.messages.splice(index - 1, 1);
				}
			}
			this.chatHeight = 100;
			this.scrollAtAheBottom = true;
		}
	}
}
</script>

<style lang="scss">

@import "../css/chat.scss";

.home-chat-body {
	flex: 1 1;
	overflow-y: auto;
	position: relative;
}

.home-chat-message {
	display: flex;
	flex-direction: row;
}

.home-chat-message-container {
	max-width: $message-max-width;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	animation: home-slide-in 0.3s ease;
	padding: 0 20px;
}

.home-chat-message-avatar {
	margin-top: 20px;
}

.home-chat-message-item {
	box-sizing: border-box;
	max-width: 100%;
	margin-top: 10px;
	border-radius: 10px;
	background-color: rgba(0, 0, 0, 0.05);
	padding: 10px;
	font-size: 14px;
	-webkit-user-select: text;
	-moz-user-select: text;
	user-select: text;
	word-break: break-word;
	border: $border-in-light;
	position: relative;
}

.home-chat-message-top-actions {
	font-size: 12px;
	position: absolute;
	right: 20px;
	top: -26px;
	left: 100px;
	transition: all 0.3s ease;
	opacity: 0;
	pointer-events: none;
	display: flex;
	flex-direction: row-reverse;
}

.home-chat-message-top-actions .home-chat-message-top-action {
	opacity: 0.5;
	color: $black;
	white-space: nowrap;
	cursor: pointer;
}

.home-chat-message-container:hover .home-chat-message-top-actions {
	opacity: 1;
	right: 10px;
	pointer-events: auto;
}

.home-chat-message-top-actions .home-chat-message-top-action:hover {
	opacity: 1;
}

.home-chat-message-top-actions .home-chat-message-top-action:not(:first-child) {
	margin-right: 10px;
}

.home-chat-message-actions {
	display: flex;
	flex-direction: row-reverse;
	width: 100%;
	padding-top: 5px;
	box-sizing: border-box;
	font-size: 12px;
}

.home-chat-message-action-date {
	color: #aaa;
}

.home-chat-message-user {
	display: flex;
	flex-direction: row-reverse;
}

.home-user-avtar {
	height: 30px;
	width: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: $border-in-light;
	box-shadow: $card-shadow;
	border-radius: 10px;
}

.home-chat-message-user > .home-chat-message-container > .home-chat-message-item {
	background-color: $second;
}

.home-chat-message-user > .home-chat-message-container {
	align-items: flex-end;
}

.home-chat-body-tail {
	padding-bottom: 20px;
}

</style>